<template>
  <div class="z-step">
    <div v-for="(step, index) in steps" :key="step.label" class="z-step-item" :class="{'active': (index + 1) <= active}" v-bind="$attrs">
      <div class="z-step-top">
        <span class="z-step-bar" v-if="index !== steps.length-1"></span>
        <span class="z-step-index">{{ index + 1 }}</span>
      </div>
      <span class="z-step-text">{{ step.label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts" name="ZStepBar">
const emits = defineEmits(['change', 'update:active']);
const props = defineProps({
  steps: {
    type: Array<any>,
    default: []
  },
  active: {
    type: Number,
    default: 1
  },
});

const data:any = reactive({
});

const {
} = toRefs(data);

defineExpose({
});
</script>

<style lang="scss" scoped>
.z-step{
  display: flex;
  .z-step-item{
    width: 100%;
    position: relative;
    &.active{
      span{
        color: var(--z-font-anti);
        &.z-step-index{
          background-color: var(--z-bg-act);
        }
        &.z-step-bar{
          background-color: var(--z-bg-act);
        }
      }
    }
    .z-step-top{
      width: 100%;
    }
    span{
      display: block;
      &.z-step-index{
        width: var(--rem-30);
        height: var(--rem-30);
        border-radius: var(--rem-30);
        background-color: var(--z-border-def);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }
      &.z-step-bar{
        height: var(--rem-10);
        background-color: var(--z-border-def);
        width: 100%;
        top: var(--rem-10);
        left: 50%;
        position: absolute;
      }
      &.z-step-text{
        text-align: center;
        font-size: var(--rem-10);
        margin-top: var(--rem-10);
      }
    }
  }
}
</style>
